<template>
	<view class="conten" :style="{ backgroundImage: `url(${bgImage})` }">
		<view class="conten_main"  >
				<view style="margin: 10px 10px 30px 10px;background-color:white;border: 2px solid #ecf5ff;border-radius: 12px;padding: 7px;">
					<view style="text-align: left;margin-bottom: 20px;">
						<image src="/static/qianshou.png" style="width: 30px;height: 30px;vertical-align: middle;"></image>
						<text style="font-size: 24px;color: #3CA218;font-weight: bold;vertical-align: middle;margin-left: 5px;">上门派送</text>
					</view>
					<view style="text-align: center;">
						<text style="font-size: 24px;color:#000000;margin-right: 10px;">{{item.code}}</text>
						<image src="/static/copy.png" style="width: 16px;height: 16px;" @click="copy"></image>
					</view>
					<view style="text-align: center;">
						<text style="font-size: 16px;color:#AAAAAA;font-size: 14px;">{{item.lstime}}</text>
					</view>
					<view style="background-color: #F2F3F5;border-radius: 50px; height: 20px; margin-bottom: 10px;margin-top: 20px;padding: 20px;display: flex; justify-content: space-between; align-items: center;">
						<text style="color: #000000;font-weight: bold;">送达地址：</text>
						<text style="color: #000000;font-weight: bold;">{{item.sdaddress}}</text>
					</view>
					<view style="display: flex; flex-wrap: wrap; gap: 10px;padding: 20px;">
					    <view v-for="(item1, index1) in item.files" :key="index1" class="file-item">
					        <image :src="item1.url" class="file-image"></image>
					        <text class="file-text">{{ item1.name }}</text>
					    </view>
					</view>
					
					<view style="text-align: left;">
						<text style="color: #000000;font-weight: bold;">签收备注：</text>
					</view>
					<view style="text-align: left;padding: 20px;">
						 <u-input
						    placeholder="请输入备注信息"
						    border="surround"
						    v-model="value"
							customStyle="height:35px;border-radius: 10px;"
						  ></u-input>
					</view>
					<view><u-button customStyle="color: #000000;font-weight: bold;width:320px;border-radius: 10px;" text="现场签收" color="#CAF182"  type="success" shape="circle" @click="qianshou"></u-button></view>
				</view>
		</view>
	</view>
</template>

<script>
	
	export default {
		data() {
			return {
				text:'',
				value:"",
				bgImage:'/static/bg.png',
				item: {},
			}
		},
		onLoad(e) {
			e={
			            code: "3255 0000 2121 323",
						lsaddress:"都江堰区xxxxx网点",
						sdaddress:"都江堰区xxxxx网点",
						lstime:'2024年 12-15 18:00揽收',
						qstime:'2024年 12-15 18:00签收',
						status:1,
						breake:'',
						files:[{url:"/static/word.png",name:"文件1"},{url:"/static/word.png",name:"文件2"},{url:"/static/word.png",name:"文件3"}]
			          }
			this.item=e;
		
		
		},
		onHide() {
			
		},
		mounted() {},
		methods: {
			back(){
				
			},  
			qianshou(){
				
			},
			copy(){
				uni.setClipboardData({
				        data: this.item.code, 
				        success: () => {
				          this.isCopied = true;
				          setTimeout(() => {
				            this.isCopied = false;
				          }, 2000);  
				        },
				        fail: (err) => {
				          console.error('复制失败:', err);
				        }
				      });
			}
		}
	}
</script>

<style lang="scss" scoped>
	.conten {
		width: 100%;
		height: 100vh;
		//position: relative;
		position: absolute;
		  top: 0;
		  left: 0;
		  width: 100%;
		  height: 100%;
		  z-index: 0; 
		   background-repeat: no-repeat; 
		      background-size: cover; 
		      background-position: center; 
	}
	.conten_main {
		width: 100%;
		height: 100vh;
		// background-color: #F3F4F6;
	}
.custom-style {
		color: #ff0000;
		width: 80rpx;
	}
	.file-item {
	    display: flex;
	    flex-direction: column; 
	    align-items: center; 
	    text-align: center;
	    width: 60px; 
	}
	
	.file-image {
	    width: 50px;
	    height: 50px;
	}
	
	.file-text {
	    margin-top: 5px; 
	    font-size: 14px;
	    color: #333;
	}
</style>